<template>
  <div>
    <ProLayout v-if="$route.meta.renderInBasicLayout!==false"
               :menus="menus"
               :collapsed="collapsed"
               :isMobile="false"
               :handleMediaQuery="handleMediaQuery"
               :handleCollapse="handleCollapse"
               :menuRender="menuRender"
               :i18nRender="i18nRender"
               v-bind="themes">

      <!-- 顶部右边登录用户信息及工具栏 -->
      <template v-slot:rightContentRender>
        <slot name="rightToolbar" />
        <UserBar v-if="!$slots.rightToolbar"
                 :unitList="unitList"
                 :themes="themes"
                 :fullName="loginUser.userName"
                 :avatar="loginUser.avatar"
                 @themesChange="handleThemesChange">
        </UserBar>
      </template>

      <!-- 顶部工具栏 -->
      <template v-slot:headerContentRender>
        <slot name="headerToolbar" />
      </template>

      <!-- 菜单头部图标及标题 -->
      <template v-slot:menuHeaderRender>
        <!-- 自定义菜单标题栏插槽 -->
        <slot name="menuHeader" />
        <!-- 默认菜单标题栏配置 -->
        <template v-if="!$slots.menuHeader">
          <img v-if="$store.getAppConfig('_menuHeadLogo')"
               :src="$store.getAppConfig('_menuHeadLogo')"
               class="menu-head-logo" />
          <h1 v-if="$store.getAppConfig('_menuHeadName')"
              style="margin:0;">{{ $store.getAppConfig('_menuHeadName') }}</h1>
        </template>
      </template>

      <!-- 悬浮设置图标 -->
      <!-- <SettingDrawer :settings="settings"
                     @change="handleSettingChange">
      </SettingDrawer> -->

      <!-- 页面内容展示区布局 -->
      <template>
        <!-- 多标签模式布局组件 -->
        <MultiTabLayout v-if="$store.getTheme('page')=='multi'"
                        ref="layout"
                        style="margin: 0px"
                        :reloadRouterView="reloadRouterView" />
        <!-- 单页面模式布局组件 -->
        <SinglePageLayout v-else
                          ref="layout"
                          style="margin: 24px"
                          :reloadRouterView="reloadRouterView" />
      </template>
    </ProLayout>

    <!-- 非主布局框架中展示页面 -->
    <a-spin :spinning="$store.state.app.loading"
            v-else>
      <router-view v-if="!reloadRouterView" />
    </a-spin>
  </div>
</template>

<script>
// ant design vue pro
import ProLayout, { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
import { i18nRender } from '../locales'

// 自定义组件
import UserBar from '../components/UserBar'
import ZMenu, { updateMenuItem } from '../components/z-menu/Menu'
import MultiTabLayout from './MultiTabLayout.vue'
import SinglePageLayout from './SinglePageLayout.vue'

export default {
  components: {
    ProLayout,
    UserBar,
    MultiTabLayout,
    SinglePageLayout
  },
  data () {
    return {
      reloadRouterView: false,
      collapsed: false,
      menus: [],
      loginUser: {},
      unitList: [],
      themes: this.$store.getThemes() // 个性化主题设置
    }
  },
  created () {
    this.$router.reload = () => {
      this.reloadRouterView = true
      this.$nextTick(() => {
        this.reloadRouterView = false
      })
    }
    this.menus = this.$store.getMenu()
    // 处理侧栏收起状态
    this.$watch('collapsed', () => {
      // this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    })
  },
  mounted () {
    this.setLoginUserInfo()
  },
  methods: {
    i18nRender,
    handleMediaQuery () {

    },
    handleCollapse (val) {
      this.collapsed = val
    },
    menuRender (h, menuProps) {
      return h(ZMenu, {
        attrs: {
          ...menuProps,
          handleMenuSelect: this.handleMenuSelect
        }
      })
    },
    handleMenuSelect (menuItem, menuMap) {
      if (!menuItem.meta.target) {
        this.$router.push(menuItem)
      } else if (menuItem.meta.target != '_blank') {
        this.$refs['layout'].openInIframe(menuItem)
      }
    },
    setLoginUserInfo () {
      this.loginUser = this.$store.getLoginUser()
      this.unitList = this.loginUser.depts.map((i) => {
        i.selected = false
        i.name = []
        i.unitName && i.name.push(i.unitName)
        i.deptName && i.name.push(i.deptName)
        i.name = i.name.join(' / ')
        if (this.loginUser.unitUserId === i.unitUserId) {
          i.selected = true
        }
        return i
      })
    },
    handleThemesChange ({ key, value }, themes) {
      key && (this.themes[key] = value)
      switch (key) {
        case 'page':
          this.$refs['layout'].reload()
          break
        case 'newTab':
          this.$refs['layout'].reload()
          break
      }
      this.$store.setThemes(this.themes)
    }
  }
}
</script>

<style lang="less" scoped>
@import "~ant-design-vue/es/style/themes/default.less";

.ant-pro-global-header-index-right {
  margin-right: 22px;

  &.ant-pro-global-header-index-dark {
    .ant-pro-global-header-index-action {
      color: hsla(0, 0%, 100%, 0.85);

      &:hover {
        background: #1890ff;
      }
    }
  }

  .ant-pro-account-avatar {
    .antd-pro-global-header-index-avatar {
      margin: ~"calc((@{layout-header-height} - 24px) / 2)" 0;
      margin-right: 8px;
      color: @primary-color;
      vertical-align: top;
      background: rgba(155, 155, 155, 0.425);
    }
  }

  .menu {
    .anticon {
      margin-right: 8px;
    }

    .ant-dropdown-menu-item {
      min-width: 100px;
    }
  }
}
.header-item-no-hover:hover {
  background-color: transparent !important;
}
.head-toolbar {
  height: 100%;
  box-sizing: border-box;
  > * {
    margin: 0px 10px;
  }
  > i {
    height: 100%;
    line-height: 65px;
    font-size: var(--font-size-20);
    cursor: pointer;
  }
}
::v-deep .ant-pro-sider-menu-logo {
  padding-left: 0px;
  text-align: center;
  .menu-head-logo {
    height: 46px;
    width: auto;
    max-height: 64px;
  }
}
.ant-pro-basicLayout-content {
  margin: 0px;
}
// .ant-pro-sider-menu-sider {
//   height: 100vh;
//   overflow: auto;
// }
// // 滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
// .ant-pro-sider-menu-sider::-webkit-scrollbar {
//   // 滚动条宽度
//   width: 8px;
//   // 滚动条高度
//   height: 10px;
// }

// // 滚动条轨道 内阴影+圆角
// .ant-pro-sider-menu-sider::-webkit-scrollbar-track {
//   // 滚动条的背景颜色
//   // 滚动条的背景区域的圆角
//   border-radius: 4px;
// }

// // 滑块 内阴影+圆角
// .ant-pro-sider-menu-sider::-webkit-scrollbar-thumb {
//   // 滚动条的圆角
//   border-radius: 4px;
//   // 滚动条的背景颜色
//   background: #fff !important;
// }

// .ant-pro-sider-menu-sider::-webkit-scrollbar-thumb:hover {
//   background: #fff !important;
// }

// .ant-pro-sider-menu-sider:hover::-webkit-scrollbar-thumb {
//   width: 50px;
// }
</style>